<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
	
	
		<view class="content">
			<!-- 搜索框 - 中式窗棂风格 -->
			<view class="search-container" @click="toSearch()">
				<view class="window-pattern">
					<view class="pattern-line horizontal top"></view>
					<view class="pattern-line vertical left"></view>
					<view class="pattern-line vertical right"></view>
					<view class="pattern-line horizontal bottom"></view>
					<u-search placeholder="绒花制作流程" shape="square" 
						searchIconColor="#7C191E" placeholderColor="#B8A188"
						bgColor="#F8F4EC" color="#5A3E36"></u-search>
				</view>
			</view>
			
			<!-- 轮播图 - 卷轴风格 -->
			<view class="swiper-container">
				<view class="scroll-decoration left"></view>
				<view class="swiper-wrapper">
					<u-swiper :list="bannerList" height="300" 
						radius="0" indicatorMode="line" 
						indicatorActiveColor="#7C191E"></u-swiper>
				</view>
				<view class="scroll-decoration right"></view>
			</view>
			
			<!-- 非遗项目圈子 - -->
			<view class="circle-section">
				<view class="section-title">
					<view class="title-text">非遗乐园</view>
					<view class="title-line"></view>
				</view>
				<u-scroll-list indicatorActiveColor="#7C191E">
					<view class="circle-scroll">
						<view class="circle-item" v-for="(item, index) in allBooksList" :key="index"
							@click="gotoCommunityItem(item.allId)">
							<view class="stamp-border">
								<image class="circle-image" :src="item.allImg" mode="aspectFill"></image>
							</view>
							<view class="circle-name">{{ item.allName }}</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			
			<view class="post-section">
			    <view class="section-title">
			        <view class="title-text">社区动态</view>
			    </view>
			    <view class="modern-post-list">
			        <view class="modern-post" v-for="item in postList" :key="item.postId" @click="toDetailPage(item.postId)">
			            <view class="post-header">
			                <image class="post-avatar" :src="'http://121.40.246.29/prod-api'+item.communityUserNameDD.avatar"></image>
			                <view class="post-user">
			                    <text class="post-username">{{item.communityUserNameDD.userName}}</text>
			                    <text class="post-time">{{item.createTime}}</text>
			                </view>
			                <view class="post-tag">非遗·{{item.communityBooksAllNameDD.allName}}</view>
			            </view>
			            <view class="post-body">
			                <text class="post-title">{{item.postTitle}}</text>
			                <text class="post-content">{{item.postContent}}</text>
			            </view>
			        </view>
			    </view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				allBooksList: [],
				bannerList:[],
				postList: [],
				communityUserNameDD:[],
				communityBooksAllNameDD:[],
				borderTop: false,
				inactiveColor: '#909399',
				activeColor: '#5098FF',
			}
		},
		onLoad(option) {
	const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.getBanner();
			this.getAllList();
			this.getPostList();
		},
		computed: {
			...mapGetters([
				'tabBerList'
			])
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/search-community'
				})
			},
			gotoCommunityItem(allId) {
				uni.navigateTo({
					url: `/pages/community/circleItem/circleItem?postAllId=${allId}`
				})
			},
			toWrite() {
				uni.navigateTo({
					url: '/pages/community/writeRecomment/writeRecomment'
				})
			},
			toDetailPage(postId) {
				uni.navigateTo({
					url: `/pages/community/detailPage/detailPage?postId=${postId}`
				})
			},
			getBanner() {
				uni.request({
					url: this.$BASE_URL.baseUrl + '/home/banner/list',
					success: (res) => {
						this.bannerList = res.data.rows.map(element => element.bannerImg);
					}
				})
			},
			getAllList(){
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/all/list',
					success: (res) => {
						this.allBooksList = res.data.rows.map(row => ({
							allId: row.allId,
							allName: row.allName,
							allImg: row.allImg,
						}));
					}
				})
			},
			getPostList(){
				uni.request({
					url:this.$BASE_URL.baseUrl +'/community/post/list',
					success:(res) => {
						this.postList =res.data.rows;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		
		background-color: #F8F4EC;
	}
	
	.content {
		padding: 0;
		background-color: #F8F4EC;
	}
	
	/* 搜索框 - 中式窗棂风格 */
	.search-container {
		padding: 30rpx;
		position: relative;
	}
	
	.window-pattern {
		position: relative;
		padding: 20rpx;
	}
	
	.pattern-line {
		position: absolute;
		background-color: #7C191E;
		z-index: 1;
	}
	
	.pattern-line.horizontal {
		height: 2rpx;
		width: calc(100% - 40rpx);
		left: 20rpx;
	}
	
	.pattern-line.horizontal.top {
		top: 0;
	}
	
	.pattern-line.horizontal.bottom {
		bottom: 0;
	}
	
	.pattern-line.vertical {
		width: 2rpx;
		height: calc(100% - 40rpx);
		top: 20rpx;
	}
	
	.pattern-line.vertical.left {
		left: 0;
	}
	
	.pattern-line.vertical.right {
		right: 0;
	}
	
	/* 轮播图 - 卷轴风格 */
	.swiper-container {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		
	}
	
	.scroll-decoration {
		width: 60rpx;
		height: 300rpx;
		background: linear-gradient(to right, #D9C7B8, #C5B09B);
		position: relative;
	}
	
	.scroll-decoration.left {
		border-radius: 8rpx 0 0 8rpx;
	}
	
	.scroll-decoration.right {
		border-radius: 0 8rpx 8rpx 0;
	}
	
	.scroll-decoration::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30rpx;
		height: 260rpx;
		background: linear-gradient(to right, #B8A188, #A5917B);
		border-radius: 4rpx;
	}
	
	.swiper-wrapper {
		flex: 1;
	}
	
	/* 区块标题样式 */
	.section-title {
		display: flex;
		align-items: center;
		margin: 40rpx 30rpx 20rpx;
	}
	
	.title-text {
		font-size: 36rpx;
		color: #5A3E36;
		font-weight: bold;
		padding-right: 20rpx;
		position: relative;
	}
	
	.title-text::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 30rpx;
		background-color: #7C191E;
		border-radius: 4rpx;
	}
	
	.title-line {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(to right, #7C191E, transparent);
	}
	
	/* 非遗项目圈子 - 印章风格 */
	.circle-section {
		margin: 0 20rpx;
	}
	
	.circle-scroll {
		display: flex;
		padding: 20rpx 0;
	}
	
	.circle-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
	}
	
	.stamp-border {
		width: 120rpx;
		height: 120rpx;
		border: 4rpx solid #7C191E;
		border-radius: 8rpx;
		padding: 8rpx;
		background-color: #fff;
		box-shadow: 0 8rpx 20rpx rgba(124, 25, 30, 0.1);
		transform: rotate(5deg);
		transition: transform 0.3s;
	}
	
	.circle-item:active .stamp-border {
		transform: rotate(0deg) scale(1.1);
	}
	
	.circle-image {
		width: 100%;
		height: 100%;
		border-radius: 4rpx;
	}
	
	.circle-name {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #5A3E36;
		max-width: 120rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* 社区帖子  */
	.modern-post-list {
	    padding: 0 20rpx;
	}
	
	.modern-post {
	    background: #fff;
	    border-radius: 16rpx;
	    padding: 30rpx;
	    margin-bottom: 24rpx;
	    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	}
	
	.post-header {
	    display: flex;
	    align-items: center;
	    margin-bottom: 20rpx;
	}
	
	.post-avatar {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    margin-right: 20rpx;
	}
	
	.post-user {
	    flex: 1;
	}
	
	.post-username {
	    font-size: 28rpx;
	    color: #333;
	    font-weight: bold;
	    display: block;
	}
	
	.post-time {
	    font-size: 24rpx;
	    color: #999;
	}
	
	.post-tag {
	    background: #f5f5f5;
	    color: #7C191E;
	    padding: 6rpx 16rpx;
	    border-radius: 20rpx;
	    font-size: 22rpx;
	}
	
	.post-body {
	    padding-left: 100rpx;
	}
	
	.post-title {
	    font-size: 32rpx;
	    color: #222;
	    font-weight: bold;
	    display: block;
	    margin-bottom: 12rpx;
	}
	
	.post-content {
	    font-size: 28rpx;
	    color: #666;
	    line-height: 1.6;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	}
</style>